<style>
    .creditRecord {
        font-size: 12px;
    }
    
    .avatar {
        width: 150px;
        height: 150px;
        background-color: rgb(207, 207, 204);
    }
    
    .userFirstRow {
        display: flex;
        flex-direction: row;
        /* border-bottom: 1px solid rgb(207, 207, 204); */
        height: 30px;
        line-height: 30px;
        /* margin-bottom: 20px; */
    }
    
    .choiceCondition {
        display: flex;
        flex-direction: row;
        margin: 10px 0px;
    }
    
    .vChangeCredit {
        color: #44CEF6;
        margin-left: 20px;
    }
    
    .creditRecord .label_top p {
        width: 80px;
        text-align: center;
        cursor: pointer;
    }
    
    .creditRecord .act {
        padding: 6px 0;
        border-bottom: 2px solid #44CEF6;
    }
    
    .el-select {
        width: 120px !important;
    }
    
    .creditSearch {
        display: flex;
        flex-direction: row;
        margin-left: 100px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        align-items: center;
    }
    
    .creditSearch input {
        width: 220px;
        height: 29px;
    }
    
    .creditBtn {
        height: 30px;
        width: 120px !important;
    }
    
    .choiceDataBtn {
        width: 80px;
        height: 40px;
        /* font-size: 12px; */
        margin-left: 20px;
    }
    
    .el-form-item__label {
        width: 82px !important;
    }
    
    .el-form-item__content {
        margin-left: 10px !important;
    }
    
    .el-form-item__content .el-form-item__content .el-input__inner {
        margin-left: 10px !important;
        width: 120px !important;
    }
    
    .export {
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #409EFF;
        border-radius: 5px;
        margin: 5px 0 0 10px;
    }
    
    .v-modal {
        position: absolute;
        background: #fff !important;
    }
    
    .creditRecord .v-modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: -2.5;
        background: #fff !important;
    }
</style>
<template>
    <div class="creditRecord w944">
        <alert ref="alert"></alert>

        <div class="label_top">
            <button @click="cancel">返回</button>
            <p @click="toUserMsg">用户详情</p>
            <p @click="soTeacher">学习档案</p>
            <p class="act">学分记录</p>
        </div>
        <div class="userFirstRow">
            <div>姓名：{{nickname}}</div>
            <div style="margin-left: 20px;">学分：{{credit}}</div>
            <div class="vChangeCredit" @click="changeCredit">变更学分</div>
        </div>
        <div class="choiceCondition label_table">

            <el-date-picker v-model="activityForm.hdsjq" type="datetime" placeholder="开始时间" :clearable='false'
                format='yyyy-MM-dd HH:mm' class="ActivityForm_input_date">
            </el-date-picker>

            <el-date-picker v-model="activityForm.hdsjz" style="margin-left: 10px;" type="datetime" placeholder="截至时间"
                :clearable='false' format='yyyy-MM-dd HH:mm' class="ActivityForm_input_date">
            </el-date-picker>

            <!-- 禁止今天之前的时间为不可点击事件 -->
            <!-- <el-date-picker v-model="activityForm.hdsjz" style="margin-left: 10px;" type="datetime" placeholder="截至时间"
                :clearable='false' format='yyyy-MM-dd HH:mm' class="ActivityForm_input_date"
                :picker-options="pickerOptions">
            </el-date-picker> -->

            <button @click="getTableList" class="choiceDataBtn">确定</button>

            <div class="creditSearch">
                <input placeholder="请输入关键词……" v-model="search" />
                <a style="padding-top: 3px;" @click="getTableList"><img src="../../assets/qudaoImg/search.png" /></a>
            </div>
            <div class="export" @click="exportData">导出数据</div>
        </div>

        <el-table :data="tableData" index stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="name" label="学分任务" style="flex:1">
            </el-table-column>
            <el-table-column prop="credit" label="学分" style="flex:1">
            </el-table-column>
            <el-table-column prop="createTime" label="时间" style="flex:1">
            </el-table-column>
        </el-table>

        <el-dialog title="变更学分" :visible.sync="dialogFormVisible">
            <p> 姓 名 ：{{nickname}}</p><br>
            <p>当前学分：{{credit}}</p><br>
            <el-form :model="dialog_form">
                <el-form-item label="变更学分：" :label-width="formLabelWidth">
                    <el-input v-model="num" type="number" @change="handleChange" placeholder="追加学分输入：50 ，扣除学分输入：-50"
                        autocomplete="off">
                    </el-input>
                </el-form-item>
                <p>变更后学分：{{creditNum}}</p>
                <el-form-item label="备注：">
                    <el-input v-model="remark" type="textarea" :rows="6" placeholder="请输入组织机构描述" autocomplete="off">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitDialogForm">确 定</el-button>
            </div>
        </el-dialog>

    </div>

</template>
<script>
    import labelAll from '../../components/label.vue';
    import alert from '../../components/Alert.vue';
    export default {
        data() {
            return {
                paramsId: localStorage.getItem('userid'),
                nickname: '',
                credit: '',
                pagesize: 15,
                currentpage: 1,
                total: 1,
                params: '',
                search: "",
                mNull: '',
                name: '',
                starttime: '',
                endtime: '',
                tableData: [],
                //活动时间  限制操作
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
                    }
                },
                activityForm: {
                    hdsjq: '',
                    hdsjz: '',
                },
                dialogFormVisible: false, //弹框开关
                creditNum: 0,
                credit: '',
                num: '',
                dialog_form: {
                    name: '',
                    region: '',
                    describes: ''
                },
                remark: '',
                formLabelWidth: '300px',
            }
        },
        methods: {
            getParams() {
                this.paramsId = localStorage.getItem('userid');
                var paramsId = localStorage.getItem('userid');
                this.params = this.$route.params;
                this.creditNum = parseInt(this.$route.params.credit);
                if (paramsId) {
                    this.$ajax({
                        url: this.$root.jifuUrl + "/getUserInfoById?userid=" + paramsId + '&rootcompanyid=1',
                        method: 'GET',
                        data: {},
                        success: res => {
                            if (res.data.code == 200) {
                                this.nickname = res.data.data.nickname;
                                this.credit = res.data.data.credit;
                                this.creditNum = res.data.data.credit;
                            }
                        }
                    });
                }
            },

            handleChange() {
                this.creditNum = parseInt(this.num) + parseInt(this.credit);
            },

            getTableList() {
                var lastStartData = '';
                var lastEndData = ''
                if (this.activityForm.hdsjq && this.activityForm.hdsjz) {
                    function checkTime(i) {
                        if (i < 10) {
                            i = "0" + i
                        }
                        return i;
                    }
                    var sDate = new Date(this.activityForm.hdsjq);
                    var eDate = new Date(this.activityForm.hdsjz);
                    //最后显示yyyy-MM-dd hh:mm
                    lastStartData = sDate.getFullYear() + '-' + (sDate.getMonth() + 1) + '-' + sDate.getDate() + ' ' + checkTime(sDate.getHours()) + ':' + checkTime(sDate.getMinutes());
                    lastEndData = eDate.getFullYear() + '-' + (eDate.getMonth() + 1) + '-' + eDate.getDate() + ' ' + checkTime(eDate.getHours()) + ':' + checkTime(eDate.getMinutes());

                    this.starttime = lastStartData;
                    this.endtime = lastEndData;
                }

                //判断两个时间的前后关系,如果第一个值晚于第二个值则返回true，否则返回false
                if ((new Date(lastStartData.replace(/-/g, "\/"))) > (new Date(lastEndData.replace(/-/g, "\/")))) {
                    this.failText = '起始时间不能晚于开始时间';
                    this.$rootFunction().deleteResFail();
                } else {
                    this.$ajax({
                        url: this.$root.jifuUrl + "/getUserCreditListPage?page=" + this.currentpage + '&num=15&userid=' + this.paramsId + '&starttime=' + this.starttime + '&endtime=' + this.endtime + '&name=' + this.search,
                        method: 'GET',
                        success: res => {
                            if (res.data.code == 200) {
                                this.tableData = res.data.data.list
                            }
                        }
                    });
                }

            },

            exportData() {
                console.log('--正在开发中--')
            },

            // 变更学分弹框提交
            submitDialogForm() {
                var s = {
                    userid: this.paramsId,
                    giveBackCredit: this.num,
                    remark: this.remark,
                };
                this.$ajax({
                    url: this.$root.jifuUrl + "/updateUserCredit",
                    method: 'POST',
                    data: this.qs.stringify(s),
                    success: res => {
                        if (res.data.code == 200) {
                            this.dialogFormVisible = false
                            this.$router.go(0);
                        }
                    }
                });
            },

            changeCredit() {
                this.dialogFormVisible = true;
                console.log('---正在开发中---')
            },
            cancel() {
                localStorage.removeItem('userid')
                localStorage.removeItem('nickname')
                this.$router.push({
                        name: 'userManager',
                    })
                    // this.$router.go(-1);
            },
            toUserMsg() {
                console.log('toUserMsg--row.id', this.paramsId)
                this.$router.push({
                    name: 'userMsg',
                    params: {
                        id: this.paramsId
                    }
                })
            },
            soTeacher() {
                console.log('paramsId.id', this.paramsId)
                this.$router.push({
                    name: 'soTeacher',
                    params: {
                        userid: this.paramsId,
                        nickname: ''
                    }
                })
            },
            pickerOptions0() {
                //  ******************** 日程时间操作 ****限制操作**************** 
                let start = this.activityForm.hdsjq ? this.activityForm.hdsjq.getTime() : '';
                let end = this.activityForm.hdsjz ? this.activityForm.hdsjz.getTime() : '';
                return {
                    disabledDate(time) {
                        return time.getTime() < start - 8.64e6 || time.getTime() > end; //如果没有后面的-8.64e6就是不可以选择今天的
                    }
                }
            }

        },
        components: {
            labelAll,
            alert
        },
        mounted() {
            this.getParams();
            this.getTableList();
            this.pickerOptions0();
        }
    }
</script>